<template>
  <el-dialog
    @close="cancel"
    :visible.sync="open"
    width="660px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="../../../../assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <!-- 处置 -->
    <el-row v-if="this.modalType == 'do'">
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-col>
          <el-form-item label="申请单位:" prop="deptName">
            <el-input
              v-model="formData.deptName"
              placeholder="请输入申请单位"
              :maxlength="1000"
              clearable
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="处置意见" prop="collaborationInfo">
            <el-input
              v-model="formData.collaborationInfo"
              type="textarea"
              placeholder="请输入处置意见"
              :maxlength="300"
              show-word-limit
              :autosize="{ minRows: 15 }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="modalCard" v-if="this.modalType == 'detail'">
      <div class="titlefangkuai">
        <div class="fangkuai"></div>
        <div class="Header">待处理业务协同基本信息</div>
      </div>

      <!-- 详情 -->
      <el-descriptions
        v-if="this.modalType == 'detail'"
        class="descriptions"
        :column="1"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item label="申请单位">{{
          this.formData.deptName
        }}</el-descriptions-item>
        <el-descriptions-item label="协同案件">{{
          this.formData.caseName
        }}</el-descriptions-item>
        <el-descriptions-item label="协同任务">{{
          this.formData.taskName
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{
          this.formData.applyTime
        }}</el-descriptions-item>
        <el-descriptions-item label="申请事由">{{
          this.formData.applyReason
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">{{
          resetButtonContent
        }}</el-button>
        <el-button
          class="searchButton"
          @click="submitForm"
          v-if="this.modalType == 'do'"
          >确定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getInfo, dealColl } from "@/api/collaboration/collaboration";
import { MODALTYPE } from "../../../../utils/variable.js";
export default {
  inheritAttrs: false,
  props: ["modalType", "collId"],
  data() {
    return {
      // isDisabled: false,
      // 弹出层标题
      title: undefined,
      // temCaseName: undefined,
      // 是否显示弹出层
      open: false,
      formData: {
        processResult: 0,
        //申请单位
        deptName: this.$store.state.user.dept.deptName,
        //单位id
        deptId: this.$store.state.user.dept.deptId,
        //法院用户的id(最新逻辑这里的含义变为专班协同的id)
        collaboratorApplicantId: this.$store.state.user.userId,
        //处置意见
        collaborationInfo: "",
      },
      rules: {
        deptName: [
          {
            required: true,
            message: "请输入单位名称",
            trigger: "blur",
          },
        ],
        collaborationInfo: [
          {
            required: true,
            message: "请输入处置意见",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    resetButtonContent() {
      if (this.modalType == MODALTYPE["详情"]) {
        return "关闭";
      } else {
        return "取消";
      }
    },
  },
  watch: {
    modalType: {
      handler(value) {
        if (value == MODALTYPE["处置"]) {
          this.open = true;
          this.title = "处置";
        } else if (value == MODALTYPE["详情"]) {
          //查询业务协同列表
          getInfo(this.collId).then((response) => {
            this.formData = response.data;

            this.open = true;
            this.title = "待处理业务协同详情";
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$emit("update:modalType", undefined);
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        processResult: 0,
        //申请单位
        deptName: this.$store.state.user.dept.deptName,
        //单位id
        deptId: this.$store.state.user.dept.deptId,
        //法院用户的id
        collaboratorApplicantId: this.$store.state.user.userId,
        //处置意见
        collaborationInfo: "",
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.formData.id = this.collId;
          //处置案件提交
          dealColl(this.formData)
            .then((response) => {
              this.$modal.msgSuccess("处置成功");
              this.open = false;
              this.$emit("update:modalType", undefined);
              this.$emit("fatherMethod");
              this.$store.dispatch("getTotal");
            })
            .catch((err) => {
              this.$modal.msgError("处置失败");
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式

::v-deep .label {
  width: 80px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #5e5f61;
  text-align: right;
  display: inline-block;
}
::v-deep .content {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #aeafb0;
}
::v-deep .el-descriptions-item__container {
  margin-bottom: 15px;
}
::v-deep.el-select {
  width: 100%;
}
::v-deep.el-form-item {
  margin-left: -5px !important;
}
.dialogClass{
 ::v-deep .el-dialog{
  top: 80px;
  }
}
</style>
